<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页-文章排行榜</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.0/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/theme-chalk/index.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/index.js"></script>
    <style>
        .artBox{
            border: 1px solid #ccc;
            margin-bottom: 10px;
            width: 220px;
            height:250px;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-container>
                <el-row>
                    <el-col :span="24">
                        <div>
                            <p style="font-size: 22px; color: gray; font-weight: bold; font-family:微软雅黑">文章排行榜TOP5</p>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div v-for="article in top5List" style="float: left; margin-right: 50px">
                            <div class="artBox">
                                <p>书名：<span v-text="article.title"></span></p>
                                <p>价格：<span v-text="article.content"></span></p>
                                <p>作者：<span v-text="article.author"></span></p>
                                <p>阅读量：<span v-text="article.viewCount"></span></p>
                            </div>
                        </div>
                    </el-col>
                </el-row>
        </el-container>
    </div>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                // Top5
                top5List: []
            }
        },
        methods:{
            // 排行榜Top5
            getTop5List() {
                axios.get('/article/top5List').then(resp=>{
                    console.log('top5:',resp);
                    this.top5List = resp.data.data;
                })
            }
        },
        created(){
            this.getTop5List();
        }
    })
</script>
</body>
</html>